<template>
  <!-- 总容器 -->
  <div className="wrapper">
    <div className="header-box">
      <header>
        <i className="fa fa-angle-left" onclick="history.go(-1)"></i>
        <p>选择AQI</p>
        <i className="fa fa-th" @click="toFeedbackList"></i>
      </header>
      <div className="top-ban"></div>
    </div>

    <table border="1">
      <tr v-for="aqi in aqiArr">
        <td>{{aqi.chineseExplain}}</td>
        <td>{{aqi.aqiExplain}}</td>
        <td>{{aqi.healthImpact}}</td>
      </tr>
    </table>
    <div className="aqi-box">
      <h4>请预估当前空气质量指数等级：</h4>
      <ul>
        <li v-for="aqi in aqiArr"
            :key="aqi.aqiId">
          <div :style="{'background-color': aqi.color}">{{aqi.chineseExplain}}</div>
          <input type="radio" v-model="aqiId" :value="aqi.aqiId" >
        </li>
      </ul>
      <h4>请填写反馈信息：</h4>
      <textarea placeholder="请填写反馈信息" v-model="information"></textarea>
      <div className="btn" @click="add" >提交</div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import {useRouter,useRoute} from "vue-router";
import {getSessionStorage,getCurDate,getCurTime} from "@/common";
import {listAqiAll, saveAqiFeedback} from "@/axios/api/OthersApi";
import 'element-plus/dist/index.css'
import { ElMessage } from "element-plus";
const router=useRouter();
const route=useRoute();
const supervisor=getSessionStorage('supervisor')
//初始化数据
//aqi列表
const aqiArr = ref([]);
const aqiId = ref(1);
//反馈信息
const information=ref("")
//初始化页面(获取api列表)
const init = () => {
  listAqiAll()
      .then((response) => {
        aqiArr.value = response.result;
        aqiId.value = aqiArr.aqiId;
      }).catch((err)=>console.log(err))
};
init();
//提交空气质量
const add = ()=> {
  if (information.value === '') {
    ElMessage.warning("反馈信息不能为空！")
    // alert("反馈信息不能为空！");
    return;
  }
  let param = {
    telId: supervisor.telId,
    provinceId: route.query.provinceId,
    cityId: route.query.cityId,
    address: route.query.address,
    information: information.value,
    estimatedGrade: aqiId.value,
    afDate: getCurDate(),
    afTime: getCurTime(),
    state: 0
  }
  console.log(aqiId)
  saveAqiFeedback(param)
      .then((response) => {
        /*if(response.code!=200){
          return;
        }*/
        //成功
        router.push('/feedbackList');
      }).catch((err)=>console.log(err))
}
const toFeedbackList = () => {
  router.push('/feedbackList')
}
</script>

<style scoped>
/************************ 表格样式 ************************/
table {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  border-color: #E4E6E9;
  font-size: 4vw;
  color: #444;
  font-weight: 700;
  margin-top: 6vw;
}

table tr td {
  box-sizing: border-box;
  padding: 1.4vw;
  background-color: #F5F7FA;
}

table tr td:first-child {
  width: 10vw;
  text-align: center;
}

table tr td:last-child {
  background-color: #FFF;
  font-weight: 300;
  font-size: 3.6vw;
}

/************************ 预估AQI样式 ************************/
.aqi-box {
  width: 90%;
  margin: 0 auto;
}

.aqi-box h4 {
  color: #444;
  margin: 5vw 0 2vw 0;
}

.aqi-box ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.aqi-box ul li {
  display: flex;
  align-items: center;
}

.aqi-box ul li div {
  box-sizing: border-box;
  padding: 1vw 2vw;
  background-color: red;
  font-size: 3.2vw;
  font-weight: 700;
  border-radius: 1vw;
}

.aqi-box ul li input {
  margin-right: 2vw;
}

.aqi-box textarea {
  width: 100%;
  height: 20vw;
  border: none;
  outline: none;
  border: solid 1px #999;
  border-radius: 2vw;
  box-sizing: border-box;
  padding: 2vw;
}
</style>